<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title> {{ .Task.ProjectOptions.PageTitle }} </title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />

    <!-- Bootstrap CSS-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/todc-bootstrap/3.3.7-3.3.13/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">

    <!-- Style CSS -->
    <link href="./css/image.css" rel="stylesheet">
</head>

<!-- no text highlighting -->
<body class="noselect" style="display:none">
<p hidden id="label_type">{{ .Task.ProjectOptions.LabelType }}</p>
<p hidden id="item_type">{{ .Task.ProjectOptions.ItemType }}</p>
<div id="keyboard_usage_window">
    <div class="panel panel-default">
        <div class="panel-heading active">
            Keyboard Usage
        </div>
        <div class="key_usage">
            <div>
                <p><span><kbd>?</kbd></span>
                    <span>Toggle Keyboard Usage display</span></p>
            </div>
            <div>
                <p><span><kbd>Esc</kbd></span> <span>Deselect label</span>
                </p>
            </div>
            <div>
                <p><span><kbd>Backspace</kbd> / <kbd>delete</kbd></span> <span>Delete selected label</span>
                </p>
            </div>
            <div>
                <p><span><kbd>+</kbd></span> <span>Zoom in</span></p>
            </div>
            <div>
                <p><span><kbd>-</kbd></span> <span>Zoom out</span></p>
            </div>
            <div>
                <p><span><kbd>&larr;</kbd></span> <span>Previous item</span></p>
            </div>
            <div>
                <p><span><kbd>&rarr;</kbd></span> <span>Next item</span></p>
            </div>
        </div>

    </div>
</div>


<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow pull-left">
    <p>
    <div id="page-title" style="position: absolute; float:left; left: 30px;">
        {{ .Task.ProjectOptions.PageTitle }}
        <!--<small class="navbar-small">ver 1.0.1</small>-->
        <a style="left: 10px" href="http://data-bdd.berkeley.edu/label/bbox/instruction.html" target="view_window" id="instruction_btn" class="btn btn-raised btn-info btn-regular">Instruction</a>
    </div>
    <div style="position: absolute; float:right; right: 40px;">
        <div style="padding-left: 10px" class="btn-group">
            <button id="prev_btn" class="btn btn-raised btn-secondary btn-regular">
                <i class="fas fa-chevron-left"></i>
            </button>
            <button href="#" id="next_btn" class="btn btn-raised btn-secondary btn-regular">
                <i class="fas fa-chevron-right"></i>
            </button>
        </div>
        <a style="left: 20px" href="#" id="save-btn"
           class="btn btn-raised btn-primary btn-regular">Save</a>
        <a style="left: 20px" href="#" id="submit-btn"
            class="btn btn-raised btn-primary btn-regular">Submit</a>
    </div>
    </p>
</nav>

<div class="container-fluid main_row" style="position: absolute; left: 0;">
    <div class="row" style="background: #777777">
        <nav class="d-none d-md-block bg-light sidebar" style="width: 200px;">
            <div class="sidebar-sticky" style="width: 200px;">
                <!-- list of control sections -->
                <div style="text-align:center;">
                    <div class="list-group mb-3" style="display: none; max-height:200px; overflow:scroll; border: 1px solid #dee2e6;" id="label_list">
                        <a href="#" class="list-group-item list-group-item-action active">
                            loading
                        </a>
                    </div>

                    <!-- Button for adding bounding boxes -->
                    <a href="#" id="add_btn" class="btn btn-toolbox">Add Box</a>

                    <a href="#" id="end_btn" class="btn btn-toolbox" style="visibility: hidden;">End Track</a>

                    <hr>

                    <div id="custom_categories" class="form-group">
                        <span>Label Category</span>
                    </div>
                    <div id="custom_attributes">
                        {{ range $key, $value := .Task.ProjectOptions.Attributes }}
                        <div class="form-group"
                             id="custom_attribute_{{ $value.Name }}_div">
                            <input id="custom_attribute_{{ $value.Name }}"
                                   name="custom_attribute_{{ $value.Name }}">
                        </div>
                        {{ end }}
                    </div>
                </div>

            </div>
        </nav>
        <main role="main" class="main_col">
            <div id="div_main">
                <div id="main_container" style="overflow: hidden;"></div>
                <div id="player-controls" style="width: 100%; top: 0;">
                    <div id="frame_counter"> 1</div>
                    <input id="slider" class="slider" type="range"
                           min="1"
                           max="{{ .Task.ProjectOptions.VideoMetaData.NumFrames }}"
                           value="1"/>
                </div>
            </div>
        </main>
    </div>
</div>

<script type="x-shader/x-vertex" id="vertexshader">
    varying float distFromOrigin;
    void main() {
        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
        distFromOrigin = length(position);
        gl_PointSize = 0.1 * ( 300.0 / -mvPosition.z );
        gl_Position = projectionMatrix * mvPosition;
    }
</script>

<script type="x-shader/x-fragment" id="fragmentshader">
    varying float distFromOrigin;

    uniform vec3 red;
    uniform vec3 yellow;
    uniform vec3 green;
    uniform vec3 teal;

    vec3 getHeatMapColor(float dist) {
        if (dist < 8.0) {
            float val = dist / 8.0;
            return (1.0 - val) * red + val * yellow;
        } else if (dist < 16.0) {
            float val = (dist - 8.0) / 8.0;
            return (1.0 - val) * yellow + val * green;
        } else {
            float val = (dist - 16.0) / 8.0;
            return (1.0 - val) * green + val * teal;
        }
    }
    void main() {
        gl_FragColor = vec4(getHeatMapColor(distFromOrigin), 1.0 );
    }
</script>

<script type="text/javascript">
  let labelType = {{ .Task.ProjectOptions.LabelType }};
  let itemType = {{ .Task.ProjectOptions.ItemType }};
</script>
<script src="./js/point_cloud.js"></script>

</body>

</html>
